<script setup>
import { reactive, ref } from 'vue'
import { useAuthStore } from '@/stores/user'
import router from '@/router/index'
import Verify from '@/components/verifition/Verify.vue'
import { login } from '@/apis/login'
import jwt_decode from 'jwt-decode'
import {addRoute} from "@/router/index";

import { useConfigStore } from '@/stores/syscfg'
const { WebSite_Name, WebSite_NameEng, WebSite_LogLogo, WebSite_LoginBG } =
  useConfigStore().cfg.config

let submiting = ref(false)
let verifyRef = ref()
let loginFormRef = ref()
const store = useAuthStore()
let loginForm = reactive({
  username: '',
  password: '',
  captcha: ''
})

const rules = reactive({
  username: [{ required: true, message: '请输入用户名', trigger: 'blur' }],
  password: [{ required: true, message: '请输入密码', trigger: 'blur' }]
})
const doLogin = async (formEl) => {
  if (!formEl) return
  await formEl.validate((valid, fields) => {
    if (valid) {
      verifyRef.value.show()
    }
  })
}
function success(params) {
  submiting.value = true
  loginForm.captcha = params.captchaVerification
  // 加密用户名和密码

  login(loginForm)
    .then((res) => {
      ElMessage({ type: 'success', message: '登录成功' })
      store.setAuth(true)
      let { userid, username, authorities } = jwt_decode(res)
      store.setUser({ userid: userid, username: username })
      store.setPermission(authorities)
      store.setToken(res)
      // let redirect = store.user.redirect
      // router.push({ name: 'Home' })
      // store.setRedirect()
        addRoute()
      submiting.value = false
    })
    .catch((res) => {
      submiting.value = false
    })
}
</script>

<template>
  <div
    class="full-container"
    :style="{ backgroundImage: WebSite_LoginBG ? 'url(' + WebSite_LoginBG + ')' : '#082851' }"
  >
    <el-row justify="center">
      <!-- <el-col :span="6"> -->
      <div class="loginPanel">
        <div v-if="WebSite_LogLogo">
          <el-image :src="WebSite_LogLogo" style="width: 280px; margin: 25px 35px -20px" />
        </div>
        <div v-else>
          <h2 class="title">{{ WebSite_Name }}</h2>
          <h3 class="engTitle">{{ WebSite_NameEng }}</h3>
        </div>
        <el-form
          label-position="top"
          size="large"
          :rules="rules"
          :model="loginForm"
          ref="loginFormRef"
        >
          <el-form-item label="用户名：" prop="username">
            <el-input placeholder="请输入" v-model="loginForm.username" :disabled="submiting" />
          </el-form-item>
          <el-form-item label="密码：" prop="password">
            <el-input
              :disabled="submiting"
              placeholder="请输入"
              type="password"
              show-password
              v-model="loginForm.password"
            />
          </el-form-item>
          <el-button type="primary" size="large" @click="doLogin(loginFormRef)" :loading="submiting"
            >登录</el-button
          >
        </el-form>
      </div>
      <!-- </el-col> -->
    </el-row>
    <Verify
      @success="success"
      mode="pop"
      captchaType="blockPuzzle"
      :imgSize="{ width: '330px', height: '155px' }"
      ref="verifyRef"
    ></Verify>
  </div>
</template>
<style scoped lang="scss">
.full-container {
  width: 100vw;
  height: 100vh;
  background-color: #001632;
  background-repeat: no-repeat;
  background-size: 100vw 100vh;
  .loginPanel {
    padding: 0px;
    width: 350px;
    height: 425px;
    background-color: #ffffff;
    border-radius: 5px;
    margin-top: calc((100vh - 500px) / 2);
    .el-form {
      padding: 35px;
    }

    .title {
      padding-top: 25px;
      color: #0069b7;
      letter-spacing: 1px;
      font-family: serif;
      font-size: 32px;
      font-weight: 1000;
      text-align: center;
    }
    .engTitle {
      font-family: serif;
      font-weight: bold;
      letter-spacing: 10px;
      color: #afafaf;
      font-size: 14px;
      text-align: center;
    }
    .el-button {
      margin-top: 30px;
      display: block;
      width: 100%;
    }
  }
}
</style>
